<template>
    <el-menu
      :default-active="activeMenu"
      class="side-bar"
      :collapse="isCollapsed"
      unique-opened
      router
      @open="handleOpen"
      @close="handleClose"
    >
      <el-menu-item index="/">展示图像</el-menu-item>
      <el-menu-item index="ShowListImage">展示点序列</el-menu-item>
      <el-menu-item index="RecognizeImage">识别图像</el-menu-item>
      <el-menu-item index="RecognizeListImage">识别点序列</el-menu-item>
      <el-menu-item index="DrawingBoard">画板</el-menu-item>
    </el-menu>
</template>

<script>
export default {
  data () {
    return {
      isCollapsed: true,
      activeMenu: ''
    }
  },
  methods: {
    toggleCollapse () {
      this.isCollapsed = !this.isCollapsed
    },
    handleOpen () {
      // 在菜单打开时触发的回调函数
    },
    handleClose () {
      // 在菜单关闭时触发的回调函数
    }
  }
}
</script>

<style scoped>
.side-bar {
  height: 100vh;
  background-color: #545c64;
  width: auto;
}

.side-bar .el-menu-item {
  color: white; /* 设置字体颜色为白色 */
}

</style>
